@charset "utf-8";
@import "common/reset";
@import "common/_frame";
@import "common/animate";
.introduce{
    width: 1000px;
    background-color: #fafafa;
    padding-top: 30px;
    > ul{
       width: 267px;
    height: 318px;
    text-align: center;
    background-color:#f2f2f2 ;
    margin-right: 22px;
    display: inline-block; 
//  margin-left:51px ;
    > li{
        margin-left: 12px;
    margin-right: 10px;
    > h2{
        font-size: 16px;
    }
    > p{
       font-size: 13px;
    color: #838383;
    line-height: 26px;
    letter-spacing: 3px; 
    }
    }
    &:first-of-type{
        margin-left:51px;
    }
    &:nth-of-type(2){
       width: 322px;
    height: 317px; 
    > li{
       margin-left: 39px;
    margin-right: 35px; 
    }
    }
    &:last-of-type{
       width: 270px;
    height: 320px;
    > li{
       margin-left: 14px;
    margin-right: 13px; 
    } 
    }
    }
}
.introduce_bg{
    width: 145px;
    border: 1px solid #6db6ff;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 32px;
    > h2{
        margin-top: -13px;
        > span{
           background-color: #fafafa;
    font-size: 23px; 
        }
    }
    > p{
        font-size: 12px;
    }
}
.protfolio{
   width: 1000px;
    background-color: #FAFAFA;
    padding-top:22px ; 
    > ul{
      background-color: #FFFFFF;
    margin-top: 32px;  
    > li{
       display: inline-block;
    margin-right: 7px; 
    }
    > li:nth-child(3n-2){
        margin-left: 51px;
    }
    }
}
.protfolio_title{
    width: 145px;
    border: 1px solid #6DB6FF;
    margin: 0 auto;
    text-align: center;
    > h2{
       margin-top: -13px;
       >span{
          background-color: #FAFAFA;
    font-size: 23px; 
       } 
    }
    > p{
      text-transform: uppercase;
    font-size: 12px;  
    }
}
.protfolio_content{
    text-align: center;
    width: 296px;
    > &:nth-child(2){
        >div:first-child{
           width: 294px;
    height: 210px; 
    >img{
        width: 100%;
    }
        }
    }
    &:last-child{
        > div:first-child{
            width: 295px;
    height: 210px;
    > img {
        width: 100%;
    }
        }
    }
    > p{
      font-size: 12px;
    letter-spacing: 3px;
    margin-top: 8px;  
    }
    > div:last-child{
      background-color:#6db6ff ;
    width: 135px;
    height: 27px;
    margin: 0 auto;
    margin-bottom: 21px; 
    > h2{
       font-size: 16px;
    color: #ffffff;
    margin-top: 20px;
    line-height: 27px; 
    }
    }
}
.banner{
   height:304px;
    background: url(../img/images/images/1.jpg) no-repeat;
    background-size: cover;
    position: relative;
    margin-left: 51px;
    margin-right: 49px; 
}
.banner_title{
    width: 145px;
    border: 1px solid #6DB6FF;
    margin: 0 auto;
    text-align: center;
    > h2{
       margin-top: -13px;
       >span{
           background-color: rgba(103,103,106,0.5);
    font-size: 23px;
       } 
    }
    >p{
      text-transform: uppercase;
    font-size: 12px;  
    }
}
.banner_img{
    margin-left: 81px;
    margin-top: 48px;
    font-size: 0;
    > img{
      margin-right: 22px;  
    }
}
.mask{
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    padding-top: 25px;
}
.arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 22px 12px 22px 7px;
    background: #3b3e41;
}
.left-arrow{
    left: 8px;
}
.right-arrow{
    right: 8px;
}
